<template>
	<view class="container">
		<u-navbar
			title="账号安全设置"
			:autoBack="true"
			fixed
			placeholder
		></u-navbar>
		
		<view class="content">
			<u-cell-group>
				<u-cell
					title="修改登录密码"
					isLink
					@click="navTo('/pages/user/security/change-password')"
				>
					<text slot="icon" class="iconfont icon-password security-icon"></text>
				</u-cell>
				<u-cell
					title="绑定手机号"
					:value="phone ? mask(phone) : '未绑定'"
					isLink
					@click="navTo('/pages/user/security/bind-phone')"
				>
					<text slot="icon" class="iconfont icon-phone security-icon"></text>
				</u-cell>
				<u-cell
					title="绑定邮箱"
					:value="email ? mask(email) : '未绑定'"
					isLink
					@click="navTo('/pages/user/security/bind-email')"
				>
					<text slot="icon" class="iconfont icon-email security-icon"></text>
				</u-cell>
			</u-cell-group>
			
			<view class="security-tips">
				<view class="tips-title">安全提示</view>
				<view class="tips-content">
					<view class="tip-item">
						<text class="iconfont icon-info"></text>
						<text class="tip-text">为保障账号安全，建议定期修改密码</text>
					</view>
					<view class="tip-item">
						<text class="iconfont icon-info"></text>
						<text class="tip-text">绑定手机和邮箱可以用于账号找回</text>
					</view>
					<view class="tip-item">
						<text class="iconfont icon-info"></text>
						<text class="tip-text">请勿将账号密码告知他人，谨防诈骗</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from '@/mixin/tools.js'
	
	export default {
		mixins: [tools],
		data() {
			return {
				phone: '13812345678', // 示例数据，实际应该从用户信息获取
				email: 'example@mail.com' // 示例数据，实际应该从用户信息获取
			}
		},
		onLoad() {
			console.log('账号安全设置页面加载')
			// 加载用户安全信息
			this.loadSecurityInfo()
		},
		methods: {
			// 加载安全信息
			loadSecurityInfo() {
				// 示例：加载用户安全相关信息
				// 实际开发中可能需要从服务器获取
				uni.showLoading({
					title: '加载中...'
				})
				
				setTimeout(() => {
					uni.hideLoading()
					// 这里应该是从服务器获取数据
					// 示例仅作演示
				}, 500)
			},
			
			// 掩码处理敏感信息
			mask(str) {
				if (!str) return ''
				
				// 邮箱处理
				if (str.includes('@')) {
					const parts = str.split('@')
					const name = parts[0]
					const domain = parts[1]
					return name.substring(0, 3) + '***@' + domain
				}
				
				// 手机号处理
				if (str.length === 11) {
					return str.substring(0, 3) + '****' + str.substring(7)
				}
				
				// 通用处理
				return str.substring(0, 3) + '***' + str.substring(str.length - 3)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}
	
	.content {
		padding: 20rpx;
	}
	
	.security-icon {
		margin-right: 10rpx;
		font-size: 36rpx;
		color: #2979ff;
	}
	
	.security-tips {
		margin-top: 30rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		
		.tips-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			border-left: 8rpx solid #2979ff;
			padding-left: 20rpx;
		}
		
		.tips-content {
			.tip-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 15rpx;
				
				.iconfont {
					font-size: 28rpx;
					color: #ff9900;
					margin-right: 10rpx;
					line-height: 1.6;
				}
				
				.tip-text {
					font-size: 26rpx;
					color: #666;
					line-height: 1.6;
				}
			}
		}
	}
</style> 